<template>
  <div id="Market">
    <div class="filter-i">
      <div class="top-box">

        <div class="filter-item">
          <div class="filter-left">物资名称</div>
          <div class="filter-right">
            <a-input
              v-model="searchForm.ncMaterielName"
              placeholder="输入关键字"
              style="width: 250px;"
              @change="changeSeach"
            />
          </div>
        </div>
        <div class="filter-item">
          <div class="filter-left">资产类型</div>
          <div class="filter-right">
            <!-- <div
              class="type-item-check1"
              :class="{item:active==index}"
              v-for="(item, index) in typeOne"
              :key="index"
              @click="seletGoodsType(item,index)"
            >
              {{ item.label }}
            </div> -->
            <a-select v-model="searchForm.goodsType" style="width: 250px;" @change="changeSeach" allowClear placeholder="请选择资产类型">
            <a-select-option
              v-for="(item,index) in typeOne"
              :key="index"
              :value="item.value"
              >
              {{ item.label }}
            </a-select-option>
          </a-select>
          </div>
        </div>
        <div class="filter-item">
          <div class="filter-left">项目名称</div>
          <div class="filter-right">
            <a-select v-model="searchForm.ncProjectId" style="width: 250px;" @change="changeSeach" allowClear :filterOption="filterOption"
              :showSearch="true" placeholder="请选择项目">
            <a-select-option
              v-for="item in projectList"
              :key="item.ncProjectName"
              :value="item.ncProjectId"
              >
              {{ item.ncProjectName }}
            </a-select-option>
          </a-select>
          </div>
        </div>
        <Filters
        :form="searchForm"
        :filterData="filterData"
        @confirm="changePage(1)"
      />
      </div>
      <a-row class="table-header">
          <a-col :span="8" class="header-item">商品</a-col>
          <a-col :span="4" class="header-item" >地区</a-col>
          <a-col :span="4" class="header-item" >单价</a-col>
          <a-col :span="4" class="header-item">可预订数量</a-col>
          <a-col :span="4" class="header-item">总金额</a-col>
        </a-row>
    </div>
    <div class="container">
      <div class="order-table">
        <div
          class="table-item"
          v-for="(item, index) in Data"
          :key="index"
        >
          <a-row class="table-item-desc" type="flex">
            <a-col>项目名称：<b>{{ item.ncProjectName }}</b></a-col>
            <a-col>上架时间：{{ item.upTime }}</a-col>
            <a-col flex='auto' style="padding-right:0">
              <a-row type="flex" justify="end">
                <a-col  class="bulk-booking" style="padding-right:0"><a-button type="primary" @click="$router.push({path:'/allot/market/bulkOrder',query:{ncProjectId:item.ncProjectId}})">批量预订</a-button></a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="table-item-body" v-for="i in item.goods" :key="i.goodsId">
            <a-col :span="8" class="flex-row">
              <img :src="i.goodsPic" class="table-pic" />
              <div class="table-info">
                <p class="info-name" @click="showDetail(i)">{{ i.ncMaterielName }}</p>
                <p>规格：{{ i.goodsSpec }}</p>
                <p>单位：{{ i.goodsUnit }}</p>
              </div>
            </a-col>
            <a-col :span="4" class="item-col">
              <p>{{ i.provinceName }} {{ i.cityName }}</p>
              <p>{{ i.address }}</p>
            </a-col>
            <a-col :span="4" class="item-col">
              ￥{{ i.unitPrice }}
            </a-col>
            <a-col :span="4" class="item-col">
              {{ i.upNumber }}
            </a-col>
            <a-col :span="3" class="item-col">
              ￥{{ i.totalPrice }}
            </a-col>
            <!-- <a-col :span="2">
              <a-checkbox value="B">
            </a-checkbox>
            </a-col> -->
          </a-row>
        </div>
        <div class="table-empty" v-if="!Data.length">
          <img src="@/assets/images/empty.png" />
          <span>暂无数据</span>
        </div>
      </div>
      <div class="page-box">
        <a-pagination
          size="small"
          :total="pageConfig.total"
          show-quick-jumper
          :show-total="(total) => `总共 ${pageConfig.total} 条数据`"
          @change="changePage"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class Task extends Vue {
  active:any='-1'
  projectList: any = [] // 项目列表
  searchForm: any = {
    provinceId: undefined,
    cityId: undefined,
    goodsType: undefined,
    ncMaterielName: undefined,
    ncProjectId: undefined
  }
  form: any = {
    date: [],
    materialName: '',
    taskName: ''
  }
  btns: any[] = [
    {
      label: '新增任务',
      icon: 'add',
      callback: () => this.$router.push('/allot/task/edit')
    }
  ]
  get filterData () {
    return {
      // searchValue: {
      //   label: '关键词',
      //   type: 'input',
      //   template: {
      //     placeholder: '请输入关键词',
      //     clearable: true
      //   }
      // },
      provinceId: {
        label: '省份',
        type: 'select',
        template: {
          placeholder: '请选择',
          clearable: true,
          options: this.provinceList,
          callback: this.getCity
        }
      },
      cityId: {
        label: '城市',
        type: 'select',
        template: {
          placeholder: '请选择',
          options: this.cityList
        }
      }
      // areaId: {
      //   label: '地区',
      //   type: 'select',
      //   template: {
      //     placeholder: '请选择',
      //     options: this.areaList
      //   }
      // }
    }
  }
  Data: any[] = []
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10
  }
  typeOne: any[] = [
    {
      label: '固定资产',
      value: 'GDZC'
    },
    {
      label: '主材',
      value: 'ZC'
    },
    {
      label: '辅材',
      value: 'FC'
    },
    {
      label: 'A类周转材料(模板支撑)',
      value: 'AZZCL'
    },
    {
      label: 'B类周转材料(料架防护)',
      value: 'BZZCL'
    },
    {
      label: 'C类周转材料(重大设施)',
      value: 'CZZCL'
    },
    {
      label: 'D类周转材料(其他)',
      value: 'DZZCL'
    }
  ]
  typeTwo: any[] = [
    {
      value: 'MF',
      label: '木方'
    },
    {
      value: 'MB',
      label: '模板'
    },
    {
      value: 'ZJB',
      label: '竹胶板'
    },
    {
      value: 'GZG',
      label: '工字钢'
    },
    {
      value: 'BHCL',
      label: '标化材料'
    }
  ]
  provinceList: any[] = []
  cityList: any[] = []
  areaList: any[] = []
  init () {
    this.getList()
    this.getProvince()
    this.getProjectList()
  }
  // 项目列表
  getProjectList () {
    this.$api.countingGetNcProject2Fetch().then((res: any) => {
      this.projectList = res.data
    })
  }
  getProvince () {
    this.$api.regionProvinceListFetch().then((res: any) => {
      this.provinceList = res.data.map((item: any) => ({label: item.province, value: item.areaId}))
    })
  }

  getCity (parent_id: string) {
    this.searchForm.cityId = ''
    // this.searchForm.areaId = ''
    if (parent_id) {
      this.$api.regionCityListFetch({parent_id}).then((res: any) => {
        this.cityList = res.data.map((item: any) => ({label: item.city, value: item.areaId}))
      })
    } else {
      this.cityList = []
    }
  }
  getArea (parent_id: string) {
    this.searchForm.areaId = ''
    this.$api.regionCountyListFetch({parent_id}).then((res: any) => {
      this.areaList = res.data.map((item: any) => ({label: item.name, value: item.id}))
    })
  }


  getList () {
    // let { searchValue, roleId, status } = this.searchForm
    let data = {
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize,
      ...this.searchForm
    }
    this.$api.goodsList2Fetch(data).then((res: any) => {
      this.Data = res.data.records
      this.pageConfig.total = res.data.total
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current
        this.getList()
      }
    })
  }
  changePage (val: number) {
    this.pageConfig.current = val
    this.getList()
  }
  searchHandle () {
    this.pageConfig.current = 1
    this.getList()
  }
  delHandle ({ adminId }: any) {
    let data = { adminId }
    this.$api.adminDeleteFetch(data).then((res: any) => {
      this.$message.success('删除成功')
      this.getList()
    })
  }
  changeStatus (row: any, index: number) {
    let { adminId, status } = row
    this.$api
      .adminStatusFetch({ adminId, status: !status })
      .then((res: any) => {
        this.$message.success(`${status ? '冻结' : '正常'}成功`)
        this.getList()
      })
  }
  showDetail (item: any) {
    this.$router.push({
      path: '/allot/market/operate',
      query: { goodsId: item.goodsId, _alias: 'detail' }
    })
  }
  seletGoodsType (item:any, index:any) {
    if (index === this.active) {
      this.active = '-1'
      this.searchForm.goodsType = undefined
    } else {
      this.active = index
      this.searchForm.goodsType = item.value
    }
    this.getList()
  }
  changeSeach () {
    this.getList()
  }
  // 过滤
  filterOption (value:any, option:any) {
    return option.componentOptions.children[0].text.indexOf(value) >= 0
  }
}
</script>

<style lang="scss" scoped>
#Market {
  .filter-i {
    margin: 0 20px 20px;
    min-width: 95.5%;
    padding: 20px 25px 0;
    position: fixed;
    height: 130px;
    z-index: 99;
    background-color: #fff;
    .top-box {
        display: flex;
        .filter-item {
            flex-direction: column;
            margin-right: 10px;
            .filter-left {
                // width: 20%;
                // color: #000;
                // font-weight: 800;
                // line-height: 1;
                margin-bottom: 5px;
            }
            .filter-right {
                flex: 1;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .type-item,
                .type-item-check {
                    display: flex;
                    align-items: center;
                    margin: 0 12px 0 0;
                    cursor: pointer;
                    border: 1px solid #ccc;
                    padding: 6px;
                    box-sizing: border-box;
                    border-radius: 4px;
                }
                .type-item {
                    color: #1e1e1e;
                    font-size: 12px;
                }
                .type-item-check {
                    background: #000;
                    color: #fff;
                    font-size: 12px;
                }
            }
        }
    }
    .table-header {
      // position: fixed;
      // top: 270px;
      z-index: 99;
      width: 100%;
    .header-item{
      background: #f5f5f5;
      text-align: center;
    }
      .ant-col {
          color: #333;
          line-height: 40px;
          font-weight: 800;
      }
    }
}
  .order-table{
    margin-top: 110px;
  }
  .table-item{
    width: 100%;
    .table-item-desc{
      margin-top: 16px;
    }
    .table-item-body {
      border-bottom: 1px solid #F1F1F1;
      // border-top: 1px solid #F1F1F1;
      margin-bottom: 0;
    }
  }

  .type-item-check1 {
      display: flex;
      align-items: center;
      margin: 0 12px 0 0;
      cursor: pointer;
      border: 1px solid #ccc;
      padding: 6px;
      box-sizing: border-box;
      border-radius: 4px;
  }
  .type-item {
      color: #1e1e1e;
      font-size: 12px;
  }
  .type-item-check1 {
      // background: #000;
      color: #333;
      font-size: 12px;
  }
}
.item{
  background: #2a68c9 !important;
  border: none !important;
  color: #fff !important;
}
.item-col{
  text-align: center;
}


</style>
